<template>
    <div class="form-sty">
        <div class="form-title" >
            <div class="span-radius"></div>
            占比分类
        </div>
        <div class="dialChart-sty" >
            <div style="height:270px" ref="leidaradar"></div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';



    const nannv = ref([{value: 1048, name: '男'}, {value: 735, name: '女'}])

        const leidaradar = ref(null);

        const myEcharts = () => {
            const myChart = echarts.init(leidaradar.value);
            myChart.hideLoading();

            const option =  {
                title: {
                    text: '',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    y: "5%",
                    x: 'left',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    },
                },
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: nannv.value,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
            }
            myChart.setOption(option);
        };

        onMounted(async () => {
            myEcharts();
        });
</script>

<style scoped>
@import "@/Css/index.css";

</style>